<template>
  <view class="hot-video-contianer">
    <!-- 1.导入mescroll-body -->
    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
    >
      <block v-for="(item, index) in videoList" :key="index">
        <hot-video-item :data="item" @click="onItemClick"></hot-video-item>
      </block>
    </mescroll-body>
  </view>
</template>

<script>
import { getHotVideoList } from "api/video";
// 2. 导入 mixin
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { mapMutations, mapState } from "vuex";
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      page: 1,
      size: 10,
      videoList: [],
      // 是否为 init
      isInit: true,
      // 实例
      mescroll: null,
    };
  },
  methods: {
    ...mapMutations("video", ["setVideoData"]),
    /**
     * item点击事件
     */
    onItemClick(data) {
      this.setVideoData({ ...data, ...this.videoData });
      uni.navigateTo({ url: "/subpkg/pages/video-detail/video-detail" });
    },
    /**
     * 获取列表数据
     */
    async loadHotVideoList() {
      const { data: res } = await getHotVideoList({
        page: this.page,
        size: this.size,
      });
      // 判断是否为第一页数据
      if (this.page === 1) {
        this.videoList = res.list;
      } else {
        this.videoList = [...this.videoList, ...res.list];
      }
    },
    /**
     * List组件首次加载
     */
    async mescrollInit() {
      await this.loadHotVideoList();
      this.isInit = false;
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess();
    },
    /**
     * 下拉刷新
     */
    async downCallback() {
      if (this.isInit) return;
      this.page = 1;
      await this.loadHotVideoList();
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess();
    },
    /**
     * 上拉加载
     */
    async upCallback() {
      if (this.isInit) return;
      this.page += 1;
      await this.loadHotVideoList();
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess();
    },
  },
  computed: {
    ...mapState("video", ["videoData"]),
  },
  created() {
    uni.showModal({
      title: "提示",
      content: "因浏览器对视频解析问题，具体呈现效果可能会存在差异！",
    });
  },
  mounted() {
    this.mescroll = this.$refs.mescrollRef.mescroll;
  },
};
</script>

<style lang="scss" scoped>
.hot-video-container {
  background-color: $uni-bg-color-grey;
}
</style>
